<!--添加按钮动画-->
<template>
    <div class="add-menu">
         <div>
            <div  class="img-style menu-item text-center" :animation="animCollect" @click="collect">心情</div>
            <div  class="img-style menu-item text-center" :animation="animTranspond" @click="transpond">提问</div>
            <image src="/static/image/xxm/addActive.png" class="img-plus-style" :animation="animPlus" @click="plus"></image>
            <!-- <image src="/static/image/xxm/addActive.png" class="img-plus-style" :animation="animPlus" @click="collect"></image> -->
        </div>
    </div> 
</template>

<script>  
export default {
    props: {
        
    },
    components: {  

    },
    data(){
        return { 
            isPopping: false,//是否已经弹出
            animPlus: {},//旋转动画
            animCollect: {},//item位移,透明度
            animTranspond: {},//item位移,透明度
            animInput: {},//item位移,透明度  
        }
    }, 
    methods:{  
           //点击弹出
        plus() { 
            if (!this.isPopping) {
                //缩回动画
                this.popp(); 
                this.isPopping=true 
            } else {
                //弹出动画
                this.takeback();
                this.isPopping=false 
            }
        },  
        transpond () {
            let vm = this;
            setTimeout(()=>{
                vm.takeback();
                vm.isPopping=false 
            },200)
            this.$emit('addQue'); 
        },
        collect () {
            let vm = this;
            this.$emit('addMood');
            setTimeout(()=>{
                vm.takeback();
                vm.isPopping=false 
            },200)
        }, 
        //弹出动画
        popp () {
            
            //plus顺时针旋转
            var animationPlus = wx.createAnimation({
                duration: 300,
                timingFunction: 'ease-out'
            })
            var animationcollect = wx.createAnimation({
                duration: 300,
                timingFunction: 'ease-out'
            })
            var animationTranspond = wx.createAnimation({
                duration: 300,
                timingFunction: 'ease-out'
            })
            // var animationInput = wx.createAnimation({
            //     duration: 300,
            //     timingFunction: 'ease-out'
            // })
            animationPlus.rotateZ(45).step();
            animationcollect.translate(-60, -60).rotateZ(0).opacity(1).step();
            animationTranspond.translate(-80, 0).rotateZ(0).opacity(1).step();
            // animationInput.translate(-100, 100).rotateZ(0).opacity(1).step();
            
            this.animPlus= animationPlus.export();
            this.animCollect= animationcollect.export();
            this.animTranspond= animationTranspond.export();
            // this.animInput= animationInput.export();
            
        },
        //收回动画
        takeback () {
            //plus逆时针旋转
            var animationPlus = wx.createAnimation({
                duration: 300,
                timingFunction: 'ease-out'
            })
            var animationcollect = wx.createAnimation({
                duration: 300,
                timingFunction: 'ease-out'
            })
            var animationTranspond = wx.createAnimation({
                duration: 300,
                timingFunction: 'ease-out'
            })
            // var animationInput = wx.createAnimation({
            //     duration: 300,
            //     timingFunction: 'ease-out'
            // })
            animationPlus.rotateZ(0).step();
            animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();
            animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();
            // animationInput.translate(0, 0).rotateZ(0).opacity(0).step();
             
            this.animPlus= animationPlus.export();
            this.animCollect= animationcollect.export();
            this.animTranspond= animationTranspond.export();
            // this.animInput= animationInput.export();
        }, 
    }
}
</script>

<style scoped lang="scss"> 
.add-menu{
    .img-plus-style {
        width:139rpx;
        height:139rpx;
        position: fixed;
        bottom: 50rpx;
        right: 32rpx;
        z-index: 100; 
    }
    
    .img-style {
        // width:96rpx;
        // height:96rpx;
        position: fixed;
        bottom: 50rpx;
        right: 32rpx;
        opacity: 0;
        transform:scale(1);
        transition: transform .2s;
        &:active{
            transform:scale(1.2);
            transition: transform .2s;
        }
    }
    .menu-item{
        width:90rpx;
        height:90rpx;
        border-radius: 50%;
        background:linear-gradient(-35deg,rgba(77,141,249,1),rgba(86,117,254,1));
        box-shadow:0px 2px 7px 0px rgba(82,127,252,0.48);
        color:#fff;
        line-height: 96rpx;
        font-size:28rpx;
    }
}

</style>
